<!Doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts-X">
    <meta name="author" content="shenyi.914@gmail.com">
    <title>World Flights - Powered by ECharts-X</title>

    <link rel="shortcut icon" href="img/favicon.png">

    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/example.css">
    <link rel="stylesheet" href="../css/codemirror.css">
    <link rel="stylesheet" href="../css/monokai.css">
    <link rel="stylesheet" href="../css/twilight.css">
    <body>
        <header id="header">
            <h1><a href="../index.html">ECharts-X</a></h1>
            <div id="toolbar">
                <button id="open-editor">Code Editor</button>
            </div>
            <ul class="links">
                <li>
                    <a href="../cn/article/getting_started.html" target="_blank">Documentation</a>
                </li>
                <li><a href="../example.html" class="active" target="_blank">Examples</a></li>
                <li><a href="https://github.com/ecomfe/echarts-x/" target="_blank">Github</a></li>
                <li><a href="http://echarts.baidu.com/" target="_blank">ECharts</a></li>
            </ul>
        </header>
        <main id="main">
            <div id="chart"></div>
        </main>
        <div id="editor">
            <textarea></textarea>
            <div id="editor-toolbar">
                <button id="editor-update">Update</button>
                <button id="editor-refresh">Refresh All</button>
                <button id="editor-close">Close</button>
            </div>
        </div>

<script type="text/x-javascript" id="code-source">

myChart.showLoading();

$.ajax({
    url: './data/flights.json',
    success: function (data) {
        var markPointStyle = {
            normal: {
                color: 'red'
            }
        }
        // Airport: [name, city, country, longitude, latitude]
        var airports = data.airports.map(function (item) {
            return {
                itemStyle: markPointStyle,
                geoCoord: [item[3], item[4]]
            }
        });

        // Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]
        var routesGroupByAirline = {};
        data.routes.forEach(function (route) {
            var airline = data.airlines[route[0]];
            var airlineName = airline[0];
            if (!routesGroupByAirline[airlineName]) {
                routesGroupByAirline[airlineName] = [];
            }
            routesGroupByAirline[airlineName].push(route);
        })

        var opts = {
            title: {
                text: 'World Flights',
                subtext: 'Data from openflights.org',
                sublink: 'http://openflights.org/data.html',
                x:'center',
                y:'top',
                textStyle: {
                    color: 'white'
                }
            },
            legend: {
                show: true,
                data: data.airlines.map(function (item) {
                    // Airline name
                    return item[0];
                }),
                selected: {},
                x: 'left',
                orient: 'vertical',
                textStyle: {
                    color: 'white'
                }
            },
            tooltip: {
                formatter: '{b}'
            },
            series: [{
                type: 'map3d',
                mapType: 'world',
                baseLayer: {
                    backgroundColor: '',
                    backgroundImage: 'asset/earth.jpg'
                },
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        borderColor: 'yellow',
                        areaStyle: {
                            color: 'rgba(0, 0, 0, 0)'
                        }
                    }
                },
                markPoint: {
                    effect: {
                        shadowBlur: 0.2
                    },
                    large: true,
                    symbolSize: 3,
                    data: airports
                }
            }]
        };

        opts.legend.data.forEach(function (name) {
            if (name.indexOf('American Airlines') >= 0) {
                opts.legend.selected[name] = true;
            } else {
                opts.legend.selected[name] = false;
            }
        });

        data.airlines.forEach(function (item) {
            var airlineName = item[0];
            var routes = routesGroupByAirline[airlineName];
            if (routes) {
                opts.series.push({
                    type: 'map3d',
                    name: airlineName,
                    markLine: {
                        effect: {
                            show: true
                        },
                        data: routes.map(function (item) {
                            return [{
                                // Source airport
                                geoCoord: airports[item[1]].geoCoord
                            }, {
                                // Destination Airport
                                geoCoord: airports[item[2]].geoCoord
                            }]
                        })
                    }
                });
            }
        });

        myChart.setOption(opts);

        myChart.hideLoading();
    }
});
</script>

        <script src="../lib/esl.js"></script>
        <script src="../lib/jquery.min.js"></script>
        <script src="js/bootExample.js"></script>

        <script>
        if (document.location.href.indexOf('local') == -1) {
            var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
            document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fb78830c9a5dad062d08b90b2bc0cf5da' type='text/javascript'%3E%3C/script%3E"));   
        }
        </script>

    </body>
</head>
</html>